/* 全局主题样式 */

/* 浅色主题 */
:root,
.light-theme {
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-tertiary: #e9ecef;
  
  --text-primary: #333333;
  --text-secondary: #666666;
  --text-tertiary: #999999;
  
  --border-primary: #e6e6e6;
  --border-secondary: #d9d9d9;
  
  --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.15);
  --shadow-heavy: 0 8px 32px rgba(0, 0, 0, 0.2);
  
  --accent-primary: #409EFF;
  --accent-success: #67C23A;
  --accent-warning: #E6A23C;
  --accent-danger: #F56C6C;
  --accent-info: #909399;
}

/* 深色主题 */
.dark,
.dark-theme {
  --bg-primary: #2b2b2b;
  --bg-secondary: #3c3c3c;
  --bg-tertiary: #4a4a4a;
  
  --text-primary: #ffffff;
  --text-secondary: #d0d0d0;
  --text-tertiary: #a0a0a0;
  
  --border-primary: #555555;
  --border-secondary: #666666;
  
  --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-heavy: 0 8px 32px rgba(0, 0, 0, 0.6);
  
  --accent-primary: #409EFF;
  --accent-success: #67C23A;
  --accent-warning: #E6A23C;
  --accent-danger: #F56C6C;
  --accent-info: #909399;
}

/* 全局样式应用 */
body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

#app {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
}

/* 主容器深色主题 */
.dark .main-container {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

.dark .sidebar {
  background-color: var(--bg-secondary) !important;
  border-right: 1px solid var(--border-primary) !important;
}

.dark .content-area {
  background-color: var(--bg-primary) !important;
}

.dark .header {
  background-color: var(--bg-secondary) !important;
  border-bottom: 1px solid var(--border-primary) !important;
}

.dark .search-container {
  background-color: var(--bg-secondary) !important;
}

.dark .search-container .el-input .el-input__inner {
  background-color: var(--bg-tertiary) !important;
  border-color: var(--border-primary) !important;
  color: var(--text-primary) !important;
}

.dark .category-section h3,
.dark .quick-section h3 {
  color: var(--text-primary) !important;
}

.dark .category-item,
.dark .quick-item {
  color: var(--text-secondary) !important;
  border-color: var(--border-primary) !important;
}

.dark .category-item:hover,
.dark .quick-item:hover {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
}

.dark .category-item.active,
.dark .quick-item.active {
  background-color: var(--accent-primary) !important;
  color: #ffffff !important;
}

.dark .account-grid {
  background-color: var(--bg-primary) !important;
}

.dark .account-card {
  background-color: var(--bg-secondary) !important;
  border-color: var(--border-primary) !important;
  color: var(--text-primary) !important;
}

.dark .account-card:hover {
  background-color: var(--bg-tertiary) !important;
  border-color: var(--border-secondary) !important;
}

.dark .account-card.selected {
  border-color: var(--accent-primary) !important;
  background-color: var(--bg-tertiary) !important;
}

.dark .account-name {
  color: var(--text-primary) !important;
}

.dark .account-username {
  color: var(--text-secondary) !important;
}

.dark .account-category {
  color: var(--text-tertiary) !important;
}

.dark .empty-state {
  color: var(--text-secondary) !important;
}

.dark .empty-state h3 {
  color: var(--text-primary) !important;
}

.dark .page-title {
  color: var(--text-primary) !important;
}

.dark .section-header {
  color: var(--text-primary) !important;
}

/* 登录页面不受主题影响 */
.login-container {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

.dark .login-container {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

.dark .login-card {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(10px) !important;
  color: #333 !important;
}

.dark .login-header .app-title {
  color: #333 !important;
}

.dark .login-header .app-subtitle {
  color: #666 !important;
}

.dark .login-container .el-input .el-input__inner {
  background-color: #f8f9fa !important;
  border-color: #e9ecef !important;
  color: #333 !important;
}

.dark .login-container .el-input .el-input__inner:focus {
  border-color: #667eea !important;
  background-color: #ffffff !important;
}

.dark .login-container .el-input .el-input__inner::placeholder {
  color: #999 !important;
}

.dark .login-container .el-button--primary {
  background: linear-gradient(45deg, #667eea, #764ba2) !important;
  border: none !important;
  color: #ffffff !important;
}

.dark .login-container .el-button--primary:hover {
  background: linear-gradient(45deg, #5a6fd8, #6a4190) !important;
}

.dark .login-container .security-tips {
  color: #666 !important;
}

.dark .login-container .security-tips .el-icon {
  color: #999 !important;
}

.dark .login-container .warning-text {
  color: #e74c3c !important;
}

/* Element Plus 主题覆盖 */
.dark .el-dialog {
  background-color: var(--bg-secondary) !important;
  border: 1px solid var(--border-primary) !important;
  box-shadow: var(--shadow-heavy) !important;
}

.dark .el-dialog__header {
  background-color: var(--bg-secondary) !important;
  border-bottom: 1px solid var(--border-primary) !important;
}

.dark .el-dialog__title {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
}

.dark .el-dialog__body {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

.dark .el-dialog__footer {
  background-color: var(--bg-secondary) !important;
  border-top: 1px solid var(--border-primary) !important;
}

.dark .el-card {
  background-color: var(--bg-secondary) !important;
  border-color: var(--border-primary) !important;
}

.dark .el-card__body {
  color: var(--text-primary) !important;
}

.dark .el-input__inner {
  background-color: var(--bg-tertiary) !important;
  border-color: var(--border-primary) !important;
  color: var(--text-primary) !important;
}

.dark .el-input__inner:focus {
  border-color: var(--accent-primary) !important;
  background-color: var(--bg-secondary) !important;
}

.dark .el-input__inner::placeholder {
  color: var(--text-tertiary) !important;
}

.dark .el-textarea__inner {
  background-color: var(--bg-tertiary) !important;
  border-color: var(--border-primary) !important;
  color: var(--text-primary) !important;
}

.dark .el-textarea__inner::placeholder {
  color: var(--text-tertiary) !important;
}

.dark .el-select .el-input__inner {
  background-color: var(--bg-tertiary) !important;
  border-color: var(--border-primary) !important;
  color: var(--text-primary) !important;
}

.dark .el-select-dropdown {
  background-color: var(--bg-secondary) !important;
  border-color: var(--border-primary) !important;
}

.dark .el-select-dropdown__item {
  color: var(--text-primary) !important;
}

.dark .el-select-dropdown__item:hover {
  background-color: var(--bg-tertiary) !important;
}

.dark .el-tabs__header {
  background-color: var(--bg-secondary) !important;
}

.dark .el-tabs__nav {
  background-color: var(--bg-secondary) !important;
}

.dark .el-tabs__item {
  color: var(--text-secondary) !important;
  border-color: var(--border-primary) !important;
  background-color: var(--bg-tertiary) !important;
}

.dark .el-tabs__item:hover {
  color: var(--text-primary) !important;
}

.dark .el-tabs__item.is-active {
  color: var(--accent-primary) !important;
  background-color: var(--bg-secondary) !important;
  border-bottom-color: var(--accent-primary) !important;
}

.dark .el-tabs__content {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

.dark .el-table {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

.dark .el-table th {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-primary) !important;
}

.dark .el-table td {
  border-color: var(--border-primary) !important;
}

.dark .el-table tr {
  background-color: var(--bg-secondary) !important;
}

.dark .el-table tr:hover > td {
  background-color: var(--bg-tertiary) !important;
}

.dark .el-upload {
  border-color: var(--border-primary) !important;
  background-color: var(--bg-secondary) !important;
}

.dark .el-upload:hover {
  border-color: var(--accent-primary) !important;
}

.dark .el-upload-dragger {
  background-color: var(--bg-tertiary) !important;
  border-color: var(--border-primary) !important;
}

.dark .el-upload-dragger:hover {
  background-color: var(--bg-secondary) !important;
}

.dark .el-alert {
  background-color: var(--bg-secondary) !important;
  border-color: var(--border-primary) !important;
}

.dark .el-alert__title {
  color: var(--text-primary) !important;
}

.dark .el-alert__description {
  color: var(--text-secondary) !important;
}

/* 按钮深色主题 */
.dark .el-button {
  background-color: var(--bg-tertiary) !important;
  border-color: var(--border-primary) !important;
  color: var(--text-primary) !important;
}

.dark .el-button:hover {
  background-color: var(--bg-secondary) !important;
  border-color: var(--border-secondary) !important;
}

.dark .el-button--primary {
  background-color: var(--accent-primary) !important;
  border-color: var(--accent-primary) !important;
  color: #ffffff !important;
}

.dark .el-button--primary:hover {
  background-color: #66b1ff !important;
  border-color: #66b1ff !important;
}

/* 开关深色主题 */
.dark .el-switch {
  background-color: var(--bg-tertiary) !important;
}

.dark .el-switch.is-checked {
  background-color: var(--accent-primary) !important;
}

/* 单选框深色主题 */
.dark .el-radio__input.is-checked .el-radio__inner {
  background-color: var(--accent-primary) !important;
  border-color: var(--accent-primary) !important;
}

.dark .el-radio__inner {
  background-color: var(--bg-tertiary) !important;
  border-color: var(--border-primary) !important;
}

.dark .el-radio__label {
  color: var(--text-primary) !important;
}

/* 复选框深色主题 */
.dark .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: var(--accent-primary) !important;
  border-color: var(--accent-primary) !important;
}

.dark .el-checkbox__inner {
  background-color: var(--bg-tertiary) !important;
  border-color: var(--border-primary) !important;
}

.dark .el-checkbox__label {
  color: var(--text-primary) !important;
}

/* 滚动条样式 */
.dark ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.dark ::-webkit-scrollbar-track {
  background: var(--bg-tertiary);
  border-radius: 4px;
}

.dark ::-webkit-scrollbar-thumb {
  background: var(--border-secondary);
  border-radius: 4px;
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: var(--text-tertiary);
}

/* 浅色主题滚动条 */
.light-theme ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.light-theme ::-webkit-scrollbar-track {
  background: var(--bg-tertiary);
  border-radius: 4px;
}

.light-theme ::-webkit-scrollbar-thumb {
  background: var(--border-secondary);
  border-radius: 4px;
}

.light-theme ::-webkit-scrollbar-thumb:hover {
  background: var(--text-tertiary);
}

/* 响应式字体大小 */
@media (max-width: 480px) {
  :root {
    font-size: 14px;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  :root {
    font-size: 15px;
  }
}

@media (min-width: 769px) {
  :root {
    font-size: 16px;
  }
}

/* 动画过渡 */
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* 无障碍优化 */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* 高对比度支持 */
@media (prefers-contrast: high) {
  :root {
    --border-primary: #000000;
    --border-secondary: #333333;
  }
  
  .dark {
    --border-primary: #ffffff;
    --border-secondary: #cccccc;
  }
}
